<template>
  <div 
    class="switch-button relative inline-block w-12 h-6 rounded-full cursor-pointer transition-colors"
    :class="{ 'bg-[#165DFF]': checked, 'bg-gray-300': !checked, 'opacity-50 cursor-not-allowed': disabled }"
    @click="handleToggle"
  >
    <div 
      class="switch-dot absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform duration-300"
      :class="{ 'translate-x-6': checked, 'translate-x-0': !checked }"
    ></div>
    <input 
      type="checkbox" 
      class="sr-only" 
      :checked="checked" 
      :disabled="disabled"
    >
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const checked = defineModel('modelValue')

const handleToggle = () => {
  if (props.disabled) return
  checked.value = !checked.value
  emit('change', checked.value)
}
</script>

<style scoped>
.switch-button {
  user-select: none;
}
</style>